<template>
  <div style="padding: 30px">
    <!-- 赛事金额 -->
    <el-form
      ref="DialogOther"
      :model="queryParams"
      :rules="rules"
      :inline="true"
    >
      <el-form-item label=" 订单状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择订单状态">
          <el-option label="待支付" value="0"></el-option>
          <el-option label="线下支付待核销" value="1"></el-option>
          <el-option label="付款中" value="2"></el-option>
          <el-option label="已支付" value="3"></el-option>
          <el-option label="退款中" value="4"></el-option>
          <el-option label="已退款" value="5"></el-option>
          <el-option label="线下退款待核销" value="6"></el-option>
          <el-option label="全部" value=""></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="支付方式:" prop="payType">
        <el-select v-model="queryParams.payType" placeholder="请选择支付方式">
          <el-option label="会员支付" value="0"></el-option>
          <el-option label="微信支付" value="1"></el-option>
          <el-option label="线下支付" value="2"></el-option>
          <el-option label="全部" value=""></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="付款时间" prop="time">
        <el-date-picker
          v-model="queryParams.date"
          type="datetimerange"
          align="right"
          value-format="YYYY-MM-DD HH:mm:ss"
          unlink-panels
          range-separator="至"
          start-placeholder="请选择日期"
          end-placeholder="请选择日期"
        />
      </el-form-item>

      <el-form-item label="订单号:" prop="orderId">
        <el-input v-model="queryParams.orderId" />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="Search"
          size="default"
          @click="handleQuery"
        >
          查询</el-button
        >
        <el-button
          type="info"
          icon="Refresh"
          size="default"
          @click="resetQuery"
        >
          重置</el-button
        >
        <el-button type="warning" size="default" @click="importFN">
          导出参赛机构付款明细</el-button
        >
      </el-form-item>
    </el-form>

    <br />

    <el-table v-loading="loading" :data="tableData">
      <el-table-column label="序号" type="index" width="55"></el-table-column>
      <el-table-column
        label="赛事名称"
        width="160"
        prop="cptName"
      ></el-table-column>
      <el-table-column label="订单号" prop="code" min-width="140">
        <template #default="props">
          <div>{{ props.row.code || "/" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="下单账号" prop="orderOwner" min-width="220">
        <template #default="props">
          <div>{{ props.row.orderOwner || "/" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="付款人" prop="payer" min-width="120">
        <template #default="props">
          <div>{{ props.row.payer || "/" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="付款机构" prop="payer" min-width="200">
        <template #default="props">
          <div>{{ props.row.groupName || "/" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="报名费" prop="registrationFee" min-width="80">
        <template #default="props">
          <div>{{ props.row.registrationFee || "/" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="兼项费" prop="compatibleFee" min-width="80">
        <template #default="props">
          <div>{{ props.row.compatibleFee || "/" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="其它费用" prop="otherFee" min-width="80">
        <template #default="props">
          <div>{{ props.row.otherFee || "/" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="保险费" prop="insuranceFee" min-width="80">
        <template #default="props">
          <div>{{ props.row.insuranceFee || "/" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="保证金" prop="depositFee" min-width="80">
        <template #default="props">
          <div>{{ props.row.depositFee || "/" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="大团体费" prop="teamFee" min-width="80">
        <template #default="props">
          <div>{{ props.row.teamFee || "/" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="总金额" prop="totalPayAmount" min-width="80">
        <template #default="props">
          <div>{{ props.row.totalPayAmount || "/" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" prop="payStatusStr" min-width="100">
        <template #default="props">
          <div>{{ props.row.payStatusStr || "/" }}</div>
        </template>
      </el-table-column>

      <!-- <el-table-column
        label="操作"
        align="center"
        fixed="right"
        class-name="small-padding"
        width="150"
      > 
        <template #default="scope">
          <el-button type="text" @click="viewRow(scope.row)">退回</el-button>
          <el-button type="text" @click="rechargrList(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>
    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      :total="total"
      @pagination="getList"
    />
  </div>
</template>

<script setup>
import { amountList } from "@/api/match/data.js";
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
import { ref } from "vue";
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const router = useRoute();
const route = useRouter();
const cptId = ref(router.query.id);
const tableData = ref([]);
const total = ref(0);
const loading = ref(true);
const payTimeArr = ref([]);

const data = reactive({
  queryParams: {
    cptId: cptId,
    status: "",
    payType: "",
    orderId: undefined,
    payTimeRange: undefined,
    pageNum: 1,
    pageSize: 10,
    payTimeRange: "",
  },
  rules: {},
});

const { queryParams, addForm } = toRefs(data);
onMounted(() => {
  getList();
});

function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

function getList() {
  loading.value = true;
  queryParams.value.payTimeRange = queryParams.value.date?.join();
  amountList(queryParams.value).then((res) => {
    loading.value = false;
    tableData.value = res.rows;
    total.value = res.total;
  });
}

function resetQuery() {
  payTimeArr.value = [];
  queryParams.value.status = undefined;
  queryParams.value.payType = undefined;
  queryParams.value.orderId = undefined;
  handleQuery();
}

/** 导出按钮操作 */
function importFN() {
  proxy.download(
    "/league/signOrder/exportLeagueAmount",
    {
      ...queryParams.value,
    },
    `job_log_${new Date().getTime()}.xlsx`
  );
}
</script>

<style scope></style>
